<template>
    <div class="header">
        <div class="side-collapse">
            <el-button type="info"
                       :icon="sidebarCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                       class="btn-sidebar"
                       @click="closeSidebarCollapse"></el-button>
        </div>
        <div class="search">
            <el-input placeholder="用户名/手机号/名称"
                      v-model="keyword"
                      size="medium">
                <el-select slot="prepend"
                           v-model="keyword_type"
                           placeholder="企业"
                           style="width: 80px;">
                    <el-option label="企业" value="0"></el-option>
                    <el-option label="个人" value="1"></el-option>
                </el-select>
                <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <div class="header-item"></div>
        <div class="quick-group">
            <el-button type="text" class="quick-group__btn" icon="el-icon-monitor">网站</el-button>
            <div class="interval-line"></div>
            <el-button type="text"
                       class="quick-group__btn"
                       :icon="skin ? 'el-icon-moon-night' : 'el-icon-sunny'"
                       @click="changeSkin">{{ skin ? '深色' : '白天' }}</el-button>
        </div>
        <!-- 用户信息 -->
        <div class="user-info">
            <el-dropdown trigger="click"
                         @command="adminSetting">
                <div class="el-dropdown-link">
                    <el-avatar class="user-info__avatar"
                               fit="cover"
                               :size="32"
                               :src="user_info.avatar"></el-avatar>
                    <div class="r-flex">
                        <div class="ml-10 mr-5"><strong class="font-s16">{{ user_info.username }}</strong></div>
                        <div class="r-flex__item">
                            <el-tag v-for="(role, index) in user_info.roles"
                                    :key="index"
                                    effect="plain"
                                    size="small"
                                    class="mr-5">{{ role.name }}</el-tag>
                        </div>
                    </div>
                    <i class="el-icon-arrow-down"></i>
                </div>
                <el-dropdown-menu slot="dropdown">
<!--                    <el-dropdown-item :class="{'text-primary': user_info.is_super}">-->
<!--                        <icon name="role"></icon>-->
<!--                        <span class="text-capitalize">-->
<!--                            <el-tag v-for="(role, index) in user_info.roles"-->
<!--                                    :key="index"-->
<!--                                    effect="plain"-->
<!--                                    size="small"-->
<!--                                    class="mr-5">{{ role.name }}</el-tag>-->
<!--                        </span>-->
<!--                    </el-dropdown-item>-->
                    <el-dropdown-item divided>
                        <icon name="mobile"></icon>{{ user_info.mobile }}
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <icon name="email"></icon>{{ user_info.email }}
                    </el-dropdown-item>
                    <el-dropdown-item command="setting" divided>
                        <icon name="setting"></icon>设置
                    </el-dropdown-item>
                    <el-dropdown-item>
                        <icon name="log"></icon>操作日志
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                        <icon name="logout"></icon>退出
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'

const cmsModule = namespace('cms')

@Component
export default class AdminHeader extends Vue {
  @Prop({type: Boolean, default: false}) skin!: boolean
  @Prop({type: String, default: 'no'}) sidebarCollapse!: string

  // Vuex
  @cmsModule.State user_info!: any

  private keyword: string = ''
  private keyword_type: string = ''

  // authUser: any = {
  //   id: null,
  //   username: 'douhaomi',
  //   nickname: '苑小勇',
  //   avatar: '~@/assets/avatar.png',
  //   super_admin: 1
  // }

  created(): void {
  }

  @Emit('setSidebarCollapse')
  private closeSidebarCollapse(): string {
    return this.sidebarCollapse !== 'yes' ? 'yes' : 'no'
  }

  @Emit('setSkin')
  private changeSkin(): boolean {
    return !this.skin
  }

  @Emit('setting')
  private adminSetting(command: string): string {
    return command
  }
}
</script>

<style lang="scss">
@import "~@/styles/element/element";
.header {
    display: flex;
    flex: 1;
    background-color: #fff;
    //border-bottom: 1px solid #eee;
    //box-shadow: 0 5px 5px rgba(#000, .1);
    z-index: 999;

    .search {
        margin-left: 20px;
        display: flex;
        align-items: center;
        //.el-input {
        //    position: relative;
        //    overflow: hidden;
        //}
        //.el-input-group__append,
        //.el-input-group__prepend,
        //.el-input__inner {
        //    border: 0 !important;
        //    background-color: $--color-info-lighter;
        //}
        //.el-button {
        //    border-left: 1px solid $--color-info-light;
        //    border-radius: 0;
        //}
    }

    &-item {
        flex: 1;
    }

    // 侧栏关闭
    .side-collapse {
        display: flex;
        align-items: center;
        margin-left: 20px;

        .btn-sidebar {
            padding: 8px 9px;
            min-height: auto;
            font-size: 16px;
            //background-color: rgba(#000, .2);
            //border: rgba(#000, .3) 1px solid;
            /*&:hover {*/
            /*    background-color: rgba(#000, .5);*/
            /*}*/
        }
    }

    .quick-group {
        display: flex;
        align-items: center;
        margin-right: 30px;

        .interval-line {
            margin: 0 8px;
            width: 1px;
            height: 12px;
            background-color: #ddd;
        }

        .el-button--text {
            font-size: 16px;
        }
    }

    // 用户信息
    .user-info {
        display: flex;
        align-items: center;
        margin-right: 20px;

        .username {
            margin: 0 5px 0 10px;
        }

        .el-dropdown {
            //color: #fff;
            .el-dropdown-link {
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        }
    }
}
</style>
